<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
    <!-- Latest compiled and minified JavaScript -->
    <script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"/>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <script language="javascript">
        $(document).ready(function(){
            function init_city(){
                province_id = $("#province").val();
                target = "#city";
                $(target).empty();
                $.getJSON('/city?province_id='+province_id,function(json){
                    $(json).each(function(i) {
                        var x = json[i];
                        //console.log(x);
                        $(target).append("<option value='" + x.id +"'>" + x.name + "</option>");
                    });
                });
            }
            $("#province").change(function(){
                init_city();
                //console.log('choose province '+$("#province").val());
            });

            init_city();
        });
    </script>
</head>

<body>
<div class="container">
    <form role="form" action="/social" method="post" style="margin-top:10px;">
        <div class="form-group">
            <label for="province">省份</label>
            <select id="province" name="province" class="form-control">
                {% for item in provines %}
                    <option value="{{item['id']}}">{{item['name']}}</option>
                {% end %}
            </select>
        </div>
        <div class="form-group">
            <label for="city">城市</label>
            <select id="city" name="city" class="form-control">
            </select>
        </div>
        <div class="form-group">
            <label for="socialtype">社保类型</label>
            <select id="socialtype" name="socialtype" class="form-control">
                {% for item in item_types %}
                    <option value="{{item['id']}}">{{item['name']}}</option>
                {% end %}
            </select>
        </div>
        <div class="form-group">
            <label for="year">社保年份</label>
            <select id="year" name="year" class="form-control">
            {% for item in range(2000,datetime.datetime.now().year+1) %}
                <option value="{{item}}">{{item}}</option>
            {% end %}
            </select>
        </div>
        <button type="submit" class="btn btn-default">查 询</button>
    </form>
</div>
</body>
</html>